<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="6" :xs="24">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>个人信息</span>
					</div>
					<div>
						<div class="text-center mb20">
							<img :src="userInfo.headUrl" alt=""
								style="width: 120px;height: 120px;border-radius: 50%;" />
						</div>
						<ul class="list-group list-group-striped">
							<li class="list-group-item">
								<div class="flex align-center">
									<el-icon><UserFilled /></el-icon> 登陆名称
								</div>
								<div class="pull-right">{{ userInfo.loginName }}</div>
							</li>
							<li class="list-group-item">
								<div class="flex align-center">
									<el-icon class="text-bold"><Iphone /></el-icon> 手机号码
								</div>
								<div class="pull-right">{{ userInfo.phone }}</div>
							</li>

							<li class="list-group-item">
								<div class="flex align-center">
									<el-icon><Avatar /></el-icon> 我的角色
								</div>
								<div class="pull-right">{{ userInfo.roleNames }}</div>
							</li>
							<!-- <li class="list-group-item">
								<div class="flex align-center">
									<i class="el-icon-date"></i> 创建日期
								</div>
								<div class="pull-right">{{ userInfo.createTime }}</div>
							</li> -->
						</ul>
					</div>
				</el-card>
			</el-col>
			<el-col :span="18" :xs="24">
				<el-card>
					<template #header>
						<div class="clearfix">
							<span>基本资料</span>
						</div>
					</template>
					<el-tabs v-model="activeTab">
						<el-tab-pane label="基本资料" name="userinfo">
							<template #default>
								<el-form :model="updateInfoCurData" ref="updateInfoCurFormRef" label-width="80px" :show-message="false">
									<el-form-item label="用户头像" prop="headUrl" required>
										<gz-upload v-model="updateInfoCurData.headUrl"
											rootPath="sys/headimg"></gz-upload>
									</el-form-item>
									<el-form-item label="用户昵称" prop="nickName" required>
										<el-input v-model="updateInfoCurData.nickName" maxlength="30"></el-input>
									</el-form-item>
									<el-form-item label="用户手机" prop="phone" required>
										<el-input v-model="updateInfoCurData.phone" maxlength="11"></el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="updateInfoSubmit">保存</el-button>
									</el-form-item>
								</el-form>
							</template>
						</el-tab-pane>
						<el-tab-pane label="修改密码" name="resetPwd">
							<template #default>
								<el-form :model="updatePasswordCurData" ref="updatePasswordCurFormRef" label-width="80px"
									:show-message="false">
									<el-form-item label="旧密码" required prop="oldPassword">
										<el-input v-model="updatePasswordCurData.oldPassword" placeholder="" type="password" clearable
											show-password maxlength="30"></el-input>
									</el-form-item>
									<el-form-item label="新密码" required prop="newPassword">
										<el-input v-model="updatePasswordCurData.newPassword" placeholder="" type="password" clearable
											show-password maxlength="30"></el-input>
									</el-form-item>
									<el-form-item label="确认密码" required prop="confirmPassword">
										<el-input v-model="updatePasswordCurData.confirmPassword" placeholder="" type="password"
											clearable show-password maxlength="30"></el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="updatePasswordSubmit">保存</el-button>
									</el-form-item>
								</el-form>
							</template>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: "Profile",
		data() {
			return {
				activeTab: "userinfo",				
				updateInfoCurData: {
					nickName: "",
					phone: "",
					loginName: "",
					headUrl: "",
				},
				updatePasswordCurData: {
					oldPassword: null,
					newPassword: null,
					confirmPassword: null,
				},
			};
		},
		computed: {
			userInfo: function() {
				return this.$store.sys().userInfo
			},
		},
		mounted() {
			if (this.activeTab == 'userinfo') {
				let userInfo = this.$store.sys().userInfo
				this.updateInfoCurData.nickName = userInfo.nickName
				this.updateInfoCurData.phone = userInfo.phone
				this.updateInfoCurData.loginName = userInfo.loginName
				this.updateInfoCurData.headUrl = userInfo.headUrl
			}
		},
		methods: {
			updateInfoSubmit() {
				this.$refs.updateInfoCurFormRef.validate((valid) => {
					if (valid) {
						this.$api.sysUserEditUserProfile(this.updateInfoCurData).then(data => {
							localStorage.clear();
							sessionStorage.clear();
							setTimeout(() => {
								this.$router.replace("/login");
							}, 1500);
						})
					}
				});
			},
			updatePasswordSubmit(){
				this.$refs.updatePasswordCurFormRef.validate((valid) => {
					if (valid) {
						if (this.updatePasswordCurData.newPassword == this.updatePasswordCurData.confirmPassword) {
							this.$common.msgBoxWarn("确定修改密码?", async () => {
								await this.$api.sysUserEditPassword(this.updatePasswordCurData);
								localStorage.clear();
								sessionStorage.clear();
								setTimeout(() => {
									this.$router.replace("/login");
								}, 1500);
							}, () => {})
						} else {
							this.$common.msgWarn("新密码不一致")
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.app-container {
		padding: 20px;
	}

	.list-group-item {
		border-bottom: 1px solid #e7eaec;
		border-top: 1px solid #e7eaec;
		margin-bottom: -1px;
		padding: 20px 0;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>